<template>
  <div>
    <h1>员工加班费补助申请</h1>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="form.name" required />
      </div>
      <div class="form-group">
        <label for="totalHours">加班总小时数:</label>
        <input type="text" id="totalHours" v-model="form.totalHours" required />
      </div>
      <div class="form-group">
        <label for="overtimeType">加班类型:</label>
        <select id="overtimeType" v-model="form.overtimeType" required>
          <option value="workday">工作日</option>
          <option value="restday">休息日</option>
          <option value="holiday">节假日</option>
        </select>
      </div>
      <div class="form-group">
        <label for="totalAmount">加班补助总金额:</label>
        <input type="text" id="totalAmount" v-model="form.totalAmount" required />
      </div>
      <div class="form-group">
        <label for="contractorCount">编外外聘人员数:</label>
        <input type="text" id="contractorCount" v-model="form.contractorCount" required />
      </div>
      <div class="form-group">
        <label for="onDutyCount">在岗人数:</label>
        <input type="text" id="onDutyCount" v-model="form.onDutyCount" required />
      </div>
      <div class="form-group">
        <label for="studyLeave">脱产学习:</label>
        <input type="text" id="studyLeave" v-model="form.studyLeave" required />
      </div>
      <div class="form-group">
        <label for="vacation">休假:</label>
        <input type="text" id="vacation" v-model="form.vacation" required />
      </div>
      <div class="form-group">
        <label for="other">其他:</label>
        <input type="text" id="other" v-model="form.other" required />
      </div>
      <div class="form-group">
        <label for="opinion">意见:</label>
        <input type="text" id="opinion" v-model="form.opinion" required />
      </div>
      <div class="form-group">
        <label for="overtimeMonth">加班月份:</label>
        <input type="month" id="overtimeMonth" v-model="form.overtimeMonth" required />
      </div>
      <div class="form-group">
        <label for="subsidyInfo">补助情况:</label>
        <input type="text" id="subsidyInfo" v-model="form.subsidyInfo" />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  name: '',
  totalHours: '',
  overtimeType: '',
  totalAmount: '',
  contractorCount: '',
  onDutyCount: '',
  studyLeave: '',
  vacation: '',
  other: '',
  opinion: '',
  overtimeMonth: '',
  subsidyInfo: ''
});

const submitForm = () => {
  // 在这里添加提交表单的逻辑
  console.log('Form submitted:', form.value);
  // 例如，发送到服务器或调用API
};
</script>

<style scoped>
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: bold;
}

input[type="text"],
input[type="month"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

/* 优化输入框和按钮的焦点样式 */
input:focus,
button:focus,
select:focus {
  outline: 2px solid #0056b3;
  background-color: #f0f0f0;
}
</style>